﻿body {
}
body{
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	color:#222222;
}
*{
	font-family: "寰蒋闆呴粦";
	font-size: 12px;
	box-sizing: border-box;
}
button{
	border:none;
	background: #ffffff;
	outline:none;
}
.tr_box{
	width:100%;
	height: 24px;
	overflow: hidden;
}
.calendar_box_wrap{
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.541176);
	z-index:999;
	position:absolute;
	top:0;
	left:0;
}
.calendar_box{
	overflow: hidden;
}
.clear_float{
	clear: both;
}
.head_show{
	width: 100%;
	height: 24%;
	box-sizing: border-box;
	padding:5%;
	color:#ffffff;
	position: relative;
}
.head_year{
	width:100%;
	font-size: 14px;
	height:20px;
	line-height: 20px;
	opacity: 0.7;
}
.head_info_box{
	width:90%;
	height:40px;
	position: relative;
	overflow: hidden;
}
.head_info{
	width:90%;
	height:40px;
	line-height: 40px;
	font-size: 24px;
	position: absolute;
	top:0;
	left: 0;
	animation:mymove 0.5s forwards;
	-webkit-animation:mymove 0.5s forwards; /*Safari and Chrome*/		
}
@keyframes mymove{
	0% {top:-20px;opacity: 0;}
	100% {top:0;opacity: 1;}
}
@-webkit-keyframes mymove{
	0% {top:-20px;opacity: 0;}
	100% {top:0;opacity: 1;}
} 
.scale_box_lit{
	animation:scaleLit 0.3s forwards;
	-webkit-animation:scaleLit 0.3s forwards; /*Safari and Chrome*/	
	overflow: hidden;		
}
@keyframes scaleLit{
	0% {transform-origin:right bottom;transform:scale(1,1);opacity:1;display: block;}
	100% {transform-origin:right bottom;transform:scale(0,0);opacity:0;display: none;}
}
@-webkit-keyframes scaleLit{
	0% {transform-origin:right bottom;transform:scale(1,1);opacity:1;display: block;}
	100% {transform-origin:right bottom;transform:scale(0,0);opacity:0;display: none;}
	
}
.scale_box_big{
	animation:scaleBig 0.3s forwards;
	-webkit-animation:scaleBig 0.3s forwards; /*Safari and Chrome*/	
	overflow: hidden;		
}
@keyframes scaleBig{
	0% {transform-origin:center;transform:scale(0,0);opacity:0}
	100% {transform-origin:center;transform:scale(1,1);opacity:1}
}
@-webkit-keyframes scaleBig{
	0% {transform-origin:center;transform:scale(0,0);opacity:0}
	100% {transform-origin:center;transform:scale(1,1);opacity:1}
} 
.scale_box_big_big{
	animation:scaleBigBig 0.2s forwards;
	-webkit-animation:scaleBigBig 0.2s forwards; /*Safari and Chrome*/	
	overflow: hidden;		
}
@keyframes scaleBigBig{
	0% {transform-origin:center;transform:scale(0,0);opacity:0}
	50% {transform-origin:center;transform:scale(1,1);opacity:1}
	99% {transform-origin:center;transform:scale(1.5,1.5);opacity:1}
	100% {transform-origin:center;transform:scale(1,1);opacity:0}
}
@-webkit-keyframes scaleBigBig{
	0% {transform-origin:center;transform:scale(0,0);opacity:0}
	50% {transform-origin:center;transform:scale(1,1);opacity:1}
	99% {transform-origin:center;transform:scale(1.5,1.5);opacity:1}
	100% {transform-origin:center;transform:scale(1,1);opacity:0}
} 
.calendar_node{
	width: 100%;
	height:10% ;
	margin-top: 10px;
}
.calendar_node_wrap{
	width: 100%;
	height: 220px;
	padding:0 5px;
	position: absolute;
	top:24%;
	left: 0;
	moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
}
.prev_month{
	float: left;
	width: 15%;
	height:100%;
	text-align: center;
	cursor: pointer;
}
.calendar_txt{
	float: left;
	width: 70%;
	height:100%;
	text-align: center;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.calendar_txt_move{
	width: 140px;
	position: absolute;
	top:0;
	left: 0;
	animation:moveleft 0.1s forwards;
	-webkit-animation:moveleft 0.1s forwards; /*Safari and Chrome*/	
}
@keyframes moveleft{
	0%{left:10px;opacity: 1;}
	20%{left:-100px;opacity: 0;}
	40%{left:200px;opacity: 0;}
	100%{left:10px;opacity: 1;}
}
@-webkit-keyframes moveleft{
	0%{left:10px;opacity: 1;}
	20%{left:-100px;opacity: 0;}
	40%{left:200px;opacity: 0;}
	100%{left:10px;opacity: 1;}
} 

.next_month{
	float: left;
	width: 15%;
	height:100%;
	text-align: center;
	cursor: pointer;
}
.calendar_fl,.kong,.calendar_week,.color_bg,.calender_txt{
	float:left;
	width:28px;
	text-align: center;
	height: 28px;
	line-height: 28px;
	border-radius: 50%;
}
.calendar_fl{
	position: relative;
	cursor:pointer;
	margin:0 2px;
}
.calendar_week,.kong{
	margin:0 2px;
}
.color_bg{
	position: absolute;
	top:50%;
	left:50%;
	width:20px;
	height:20px;
	margin-top:-10px;
	margin-left: -10px;
	line-height: 20px;
	moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
}
.calender_txt{
	position: absolute;
	top:0;
	left:0;	
	background:transparent;
}
.btn_box{
	width: 100%;
	height:35px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.cancel_btn,.make_sure_btn,.ok_btn{
	text-align: center;	
	width: 20%;
	float:right;
	cursor: pointer;
}
.make_sure_btn,.ok_btn{
	margin-right:20px;	
}
.go_back_btn{
	text-align: center;
	width: 20%;
	float:left;
	margin-left:20px;
	cursor: pointer;
}
.calenda_today{
	color:#ffffff;
}
.hide{
	display: none;
}
.foot_box{
	width: 100%;
	height:220px;
	position: absolute;
	left: 300px;
	top: 24%;
	box-sizing: border-box;
	padding:20px 10px 10px;
	moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
}

.data_select{
	width: 100%;
	height: 150px;
	border-radius: 3px;
	overflow: hidden;
	background:#e5e5e5;
	position:relative;
}
.data_select_left_wrap,.data_select_right_wrap{
	width: 49%;
	height: 100%;
	text-align: center;
	z-index: 99;
	overflow: hidden;
	position: relative;
}
.data_select_left_wrap{
	border-right:solid 2px #ffffff;	
}
.data_select_left,.data_select_right{
	width: 100%;
	height: 100%;
	text-align: center;
	position: absolute;
	top:0;
	left:0;
}
.data_node{
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	color: #D3D3D3;
	text-align: center;
}
.data_node_center{
	color:#696969;
	font-size: 18px;
}
.data_node_around{
	color:#BEBEBE;
	font-size: 16px;
}
.fl{
	float:left;
}
.tip{
	width: 100%;
	height: 20px;
	line-height: 20px;
	font-size:12px;
	color: #aaaaaa;
	margin: 5px;
}
.mouseover{
	color:#ffffff !important;
}
.num_wrap{
	width: 98%;
	height:170px;
	position:absolute ;
	left:10px;
	top:30px;
	margin-left: -9px;
}
.num_wrap_move{
	animation:moveleft 0.5s forwards;
	-webkit-animation:moveleft 0.5s forwards; /*Safari and Chrome*/	
}
.all_wrap{
	width: 230px;
	height: 190px;
	position: relative;
}
.month_box{
	width: 230px;
	height: 156px;
	position: absolute;
	left:5px;
	top: 130px;
}
.year_box{
	width: 230px;
	height: 170px;
	position: absolute;
	left:5px;
	top: 130px;
	overflow: hidden;
	padding: 0;
	-moz-box-shadow: 5px 5px 10px #ffffff inset,-5px -5px 10px #ffffff inset;
	-webkit-box-shadow: 5px 5px 10px #ffffff inset,-5px -5px 10px #ffffff inset;
	-o-box-shadow: 5px 5px 10px #ffffff inset,-5px -5px 10px #ffffff inset;
}
.month_select_node{
	width: 55px;
	height: 50px;
	color:#222222;
	background: transparent;
	text-align: center;
	line-height: 50px;
	float:left;
	margin:1px;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
}
.year_select_node{
	width: 55px;
	height: 50px;
	color:#222222;
	background: transparent;
	text-align: center;
	line-height: 50px;
	display: inline-block;
	margin:1px;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;	
}
.month_select_node_txt,.month_select_node_wrap,.year_select_node_txt,.year_select_node_wrap{
	width: 55px;
	height: 50px;
	position: absolute;
	top:0;
	left:0;
}
.year_info_wrap{
	position: absolute;
	left:0;
	top:0;
}
.visibility_class{
	visibility:hidden;
}
.gray_class{
	-webkit-filter: grayscale(1) !important;/* Webkit */ 
	filter:gray !important;/* IE6-9 */ 
	filter: grayscale(1) !important;/* W3C */ 	
	color:#aaaaaa !important;
	cursor: default;
}
.default_color{
	background: #ffffff;
	color:#222222;
}
